<template>
	<view class="content">
		<view class="title-box">
			<scroll-view scroll-x="true" @scroll="scroll">
				<view class="scroll-box">
					<view class="item-box" v-for="(item,index) in changdiList" :key="index" :class="CheckChangdiId == index?'active':''"
						@click="_getBookingViewList(item.id),checkId(index)">

						<view class="title">
							{{item.name}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="bottom-content">
			<view class="father-item-content" v-for="(item,i) in bookingList" :key="i"
				:style="{ marginBottom: payIndex === 0 ? '150px' : '240px' }">
				<view class="title-content" v-if="bookingList">
					<view class="top-title">
						{{i == 0?"今天":i == 1?'明天':'后天'}}
					</view>
					<view class="bottom-title">
						{{item.day}}
					</view>
				</view>
				<view class="item-item-content">
					<view class="item" v-for="(item2,i2) in item.data" :class="[
        { check: item2.isCheck }, 
        { ispay: item2.isPay }
    ]" @click="checked(item2,i,i2,item.day)" :key="i2">
						<view class="p1">
							{{slipTime(item2.start_time) + ' - ' + slipTime(item2.end_time)}}
						</view>
						<view class="p2">
							{{'¥' + item2.feiyong}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-btn-content">
			<view class="item-list-content">
				<view class="p1">
					<view class="span">

					</view>
					<view class="text">
						可预约
					</view>
				</view>
				<view class="p2">
					<view class="span">

					</view>
					<view class="text">
						已售出
					</view>
				</view>
				<view class="p3">
					<view class="span">

					</view>
					<view class="text">
						我的选择
					</view>
				</view>
			</view>
			<view class="pay-content" v-if="payIndex != 0">
				<view class="p1">
					已选择场次:{{payIndex}}
				</view>
				<view class="scroll">
					<scroll-view class="scroll-view_H" scroll-x="true">
						<view class="item" v-for="(item,i) in payListData" :key="i">
							<view class="p1">
								{{slipTime(item.start_time) + ' - ' + slipTime(item.end_time)}}
							</view>
							<view class="p2">
								{{'¥' + item.feiyong}}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="btn-content">
				<view class="left-content">
					¥{{mesMoney.toFixed(2)}}
				</view>
				<view class="right-btn" @click="gotoPayBtn(mesMoney)">
					{{ mesMoney.toFixed(2) === "0.00" ? '请选择时间' : '确认支付' }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import Header from '@/component/topBar.vue';
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app';
	import jsrsasign from 'jsrsasign';
	import {
		base64Img
	} from '@/tools/tools.js'
	import {
		ref,
		reactive
	} from 'vue';
	import {
		getBookingViewList,
		getYuyueApi,
		getChangdiList
	} from '../../api/api.js';
	
	
	// 场地id
	const CheckChangdiId = ref(0)
	
	// 上级传入的数据
	const viewData = ref({})
	// 计算金额
	const mesMoney = ref(0)
	// 预约列表
	const bookingList = ref([])
	// 购物车列表
	const payListData = ref([])
	// 购物车列表计数
	const payIndex = ref(0)
	// 购物车同时日期
	const payTime = ref(0)
	// 是否时间是同一天
	const payCheck = ref(false)
	// openid
	const openId = ref('')
	// 获取场地列表
	const changdiList = ref([])
	// 场馆信息
	const changguanxinxi = ref({})
	// 场地id
	const changdiId = ref('')
	
	// 场地选择
	const checkId = (id) => {
		CheckChangdiId.value = id
	}
	
	
	
	
	
	// 获取预约列表 包含数据预处理
	const _getBookingViewList = (id) => {
		changdiId.value = id
		let now = new Date();

		getBookingViewList(id).then((res) => {
			console.log('所有预约列表的原始数据', res);
			let allData = []
			for (let i = 0; i < res.record.length; i++) {
				let maxDataList = []
				for (let i2 = 0; i2 < res.record[i].data.length; i2++) {
					let item = res.record[i].data[i2]

					// 判断是否预约
					if (item.appointment_status === '未预约') {
						item.isPay = false
					} else {
						item.isPay = true
					}

					// 时间判断是否可选
					if (i == 0) {
						let currentTime = now.toTimeString().split(' ')[0]
						if (currentTime > item.start_time) {
							item.isPay = true
						}
					}

					item.checkid = (i + 1) + "0" + i2
					item.isCheck = false
					maxDataList.push(item)

					uni.hideLoading();
				}
				allData[i] = {
					day: res.record[i].day,
					data: maxDataList
				}
			}
			bookingList.value = allData
			console.log('所有预约列表', bookingList.value);
		})
	}
	// 时间修正
	const slipTime = (time) => {
		let result = time.replace(/^0/, '').split(':').slice(0, 2).join(':');
		return result
	}

	// 结算系统开始
	const checked = (item, index, index2, fatherTime) => {



		// 预留如果已经预约 或者 时间已经过了的限制
		if (item.isPay == false) {

			// 判断是否要加入购物车 要求同时只能选择一天的
			if (mesMoney.value == 0) {
				// 开始计数
				payTime.value = index
				console.log(item, payTime.value, index, index2, fatherTime);
				checkBtn2(item, index, index2, fatherTime)
			} else if (payTime.value != index) {
				// 如果时间不对
				uni.showModal({
					title: '提示',
					content: '请选择同一天场地进行预约'
				})

			} else if (payTime.value == index) {

				checkBtn2(item, index, index2, fatherTime)
			}
		}
	}

	const checkBtn2 = (item, index, index2, fatherTime) => {
		// 控制显示是否为绿色
		bookingList.value[index].data[index2].isCheck = !bookingList.value[index].data[index2].isCheck

		// 计算金额 先加 后减
		if (bookingList.value[index].data[index2].isCheck) {
			mesMoney.value = mesMoney.value + item.feiyong
		} else {
			mesMoney.value = mesMoney.value - item.feiyong
		}

		// 推送购物车 - 删除 先增加 后删除 
		if (bookingList.value[index].data[index2].isCheck) {
			let data = item
			data.dayTime = fatherTime
			payListData.value.push(data);
			payIndex.value = payListData.value.length;

		} else {
			let data = [];
			for (var i = 0; i < payListData.value.length; i++) {
				if (payListData.value[i].checkid !== item.checkid) {
					data.push(payListData.value[i]);
				}
			}
			payListData.value = data; // 更新支付列表
			payIndex.value = payListData.value.length;
		}
	}



	// 跳转支页面 先向后台询问是否预约 如果预约成功 就跳转 失败就提示
	const gotoPayBtn = (index) => {
		if (index.toFixed(2) === '0.00') {
			uni.showToast({
				title: '请选择时间',
				icon: 'none',
				duration: 1000
			})
		} else {
			let data = []

			for (var i = 0; i < payListData.value.length; i++) {
				data.push(payListData.value[i].id)
			}

			getYuyueApi(data).then((res) => {
				if (res.result == 'ok') {
					let bookingPayInfo = JSON.stringify(payListData.value)
					let moneyData = mesMoney.value
					let changguanid = changguanxinxi.value.id
					let yue = changguanxinxi.value.vipyue
					let isvip = changguanxinxi.value.is_vip == 'True' ? true : false
					let changdi = changdiId.value
					let json = {
						bookingPayInfo,
						moneyData,
						changguanid,
						yue,
						isvip,
						changdi
					}
					console.log('跳转参数', );
					uni.navigateTo({
						url: `/pages/booking_view/booking_pay_view/booking_pay_view?paylist=${bookingPayInfo}&paymoney=${moneyData}&changguanId=${changguanid}&yue=${yue}&isVip=${isvip}&changdi=${changdi}`
					});
				} else {
					// 如果已经被预约 用户点击确定后会重新获取页面数据
					uni.showModal({
						content: res.result,
						success: function() {
							// 刷新页面内容
							_getBookingViewList(viewData.value.id)
							// 购物车清空
							payListData.value = []
							payIndex.value = 0
							mesMoney.value = 0
						}
					})

				}
			})
		}
	}

	// 获取场地列表 无搜索
	const _getuseropenid = (id, openid) => {
		getChangdiList(id, openid).then((res3) => {
			changdiList.value = res3.values
			changguanxinxi.value = res3.chang_guan
			let id = res3.values[0].id
			_getBookingViewList(id)
			console.log(res3);
		})
	}

	onLoad((option) => {
		viewData.value = option;
		console.log('上级传入的数据', option);
		uni.getStorage({
			key: 'openid',
			success: function(res) {
				openId.value = res.data.openid
				_getuseropenid(option.id, res.data.openid)
			}
		})
		uni.showLoading({
			title: '加载中'
		});
	});
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		position: relative;

		.title-box {
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid gainsboro;

			.scroll-box {
				display: flex;

				.item-box {
					margin-top: 10rpx;
					background-color: #5b72f2;
					margin-right: 10rpx;
					margin-left: 10rpx;
					border-radius: 20rpx;



					.title {
						width: 180rpx;
						line-height: 80rpx;
						text-align: center;
						color: white;
					}
				}
				.active {
					background-color: #1ec289;
				}
			}
		}

		.bottom-content {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			/* 创建三列 */
			gap: 10px;
			padding: 10px;

			.father-item-content {
				margin-bottom: 150px;

				/* 列间距 */
				.title-content {
					text-align: center;
					padding: 10px;
					border: 2px solid skyblue;
					border-radius: 8px;
					background-color: #fcfcfd;

					.top-title {
						font-size: 18px;
					}

					.bottom-title {
						font-size: 12px;
					}
				}

				.item-item-content {

					.item {
						background-color: #fcfcfd;
						padding: 10px;
						border: 1px solid #5b72f2;
						color: #5b72f2;
						border-radius: 8px;
						margin-top: 10px;

						.p1 {
							font-size: 12px;
							text-align: center;
						}

						.p2 {
							text-align: center;
						}
					}

					.check {
						border: 1px solid #1ec289;
						background-color: #1ec289;
						color: white;
					}

					.ispay {
						border: 1px solid gray;
						background-color: gray;
						color: white;
					}
				}
			}
		}

		.bottom-btn-content {
			position: fixed;
			bottom: 0;
			width: 100vw;
			background-color: white;

			.item-list-content {
				padding: 10px;
				display: flex;
				font-size: 12px;
				line-height: 20px;

				.p1 {
					display: flex;

					.span {
						border-radius: 4px;
						width: 30px;
						height: 20px;
						border: 1px solid #5b72f2;
						margin-right: 4px;
					}

					.text {}
				}

				.p2 {
					display: flex;
					margin-left: 10px;

					.span {
						border-radius: 4px;
						width: 30px;
						height: 20px;
						margin-right: 4px;
						background-color: #e6e6e6;
					}

					.text {}
				}

				.p3 {
					display: flex;
					margin-left: 10px;

					.span {
						border-radius: 4px;
						width: 30px;
						height: 20px;
						margin-right: 4px;
						background-color: #1ec289;
					}

					.text {}
				}
			}

			.pay-content {
				padding: 0px 0px 10px 20px;

				.scroll {
					.scroll-view_H {
						white-space: nowrap;
						width: 100%;
					}

					.item {
						display: inline-block;
						border-radius: 10px;
						padding: 10px 8px;
						width: 110px;
						background-color: #f5f5f5;
						position: relative;
						margin-right: 10px;

						.p1 {
							font-size: 14px;
						}

						.span {
							position: absolute;
							top: 20px;
							left: 110px;
						}
					}
				}

			}

			.btn-content {
				border-top: 1px solid gainsboro;
				padding: 10px 20px 16px 20px;
				display: flex;
				justify-content: space-between;

				.left-content {
					line-height: 50px;
					font-size: 24px;
					color: red;
				}

				.right-btn {
					line-height: 40px;
					padding: 10px 18px;
					font-size: 18px;
					background-color: #5b72f2;
					color: white;
					border-radius: 20px;
				}
			}
		}

	}
</style>